<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../../layuiAdmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../layuiAdmin//style/font-awesome/css/font-awesome.min.css">
    <style>
        .layui-form-select dl {
            max-height: 120px;
        }
    </style>
</head>

<body>
    <div class="layui-form layui-form-pane" id="popup-from" style="padding: 20px 30px 0 30px">
        <input type="text" name="cId" value="" style="display: none;" />
        <div class="layui-form-item layui-row layui-col-space15">
            <div class="layui-col-xs6">
                <label class="layui-form-label">按钮名称</label>
                <div class="layui-input-block">
                    <div name="cTitle" id="cTitle"></div>
                </div>
            </div>
            <div class="layui-col-xs6">
                <label class="layui-form-label">是否启用</label>
                <div class="layui-input-block">
                    <input type="radio" name="cEnabled" value="true" title="是" checked>
                    <input type="radio" name="cEnabled" value="false" title="否">
                </div>
            </div>
            <div class="layui-col-xs6">
                <label class="layui-form-label">显示位置</label>
                <div class="layui-input-block">
                    <input type="radio" name="cPosition" value="1" title="工具栏" checked>
                    <input type="radio" name="cPosition" value="2" title="行内">
                </div>
            </div>
            <div class="layui-col-xs6">
                <label class="layui-form-label">图标</label>
                <div class="layui-input-inline" style="max-width: 30px; padding-top: 5px;padding-left:10px" id="iconShow">
                </div>
                <div class="layui-input-inline" style="width:calc(100% - 160px);margin-right:auto;float:right">
                    <input type="text" name="cIcon" lay-verify="required"
                           autocomplete="new-password" placeholder="请双击选择图标" class="layui-input">
                </div>
            </div>
            <div class="layui-col-xs6">
                <label class="layui-form-label">编号</label>
                <div class="layui-input-block">
                    <input type="text" name="cEnCode" lay-verify="required" placeholder="请输入编号" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-col-xs6">
                <label class="layui-form-label">排序</label>
                <div class="layui-input-block">
                    <input type="text" name="cSortCode" lay-verify="required|number" id="txtTel" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-col-xs12">
                <label class="layui-form-label">弹窗路径</label>
                <div class="layui-input-block">
                    <input type="text" name="cPath" placeholder="请输入弹窗路径" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-col-xs12">
                <label class="layui-form-label">api</label>
                <div class="layui-input-block">
                    <input type="text" name="cApi" placeholder="请输入" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item layui-layout-admin layui-hide">
            <div class="layui-input-block">
                <div class="layui-footer" style="left: 0; text-align: right">
                    <button class="layui-btn" lay-filter="form-submit" id="form-submit" type="button" lay-submit>
                        立即提交
                    </button>
                </div>
            </div>
        </div>
    </div>
    <script src="../../layuiAdmin/layui/layui.js"></script>
    <script src="../../layuiAdmin/lib/extend/xm-select.js"></script>
    <script>
        layui.config({
            base: '../../layuiAdmin/', //静态资源所在路径
            version: top.layui.setter.version
        }).extend({
            index: 'lib/index' //主入口模块
        }).use(['index', 'form'], function () {
            var $ = layui.$,
                form = layui.form,
                admin = layui.admin
            var id = $.getParam("id");
            var title = $.getParam("title");
            var moduleId = $.getParam("moduleId");

            $("input[name='cIcon']").on('dblclick', function () {
                parent.layer.open({
                    type: 2,
                    title: '图标',
                    area: ['800px', '500px'], //宽高
                    content: '../home/icon1.html',
                    success: function (layero, index) {
                        var li = layero.find('iframe').contents().find('li');
                        li.on('dblclick', function () {
                            let icon_text = $(this).find('.doc-icon-fontclass').text();
                            $("input[name='cIcon']").val(icon_text);
                            parent.layer.close(index);
                            $("#iconShow").html('<i class="layui-icon ' + icon_text + '" style="font-size:30px"></i>');
                        })
                        var a = layero.find('iframe').contents().find('#icons a');
                        a.on('dblclick', function () {
                            let icon_text = $(this).find('i').attr("class").replace("fa ", "");
                            $("input[name='cIcon']").val(icon_text);
                            $("#iconShow").html(' <i class="fa ' + icon_text + ' fa-fw fa-2x" aria-hidden="true"></i>');
                            parent.layer.close(index);
                        })
                    }
                });
            });


            var xmTitle = xmSelect.render({
                el: '#cTitle',
                name: 'cTitle',
                tips: '请输入按钮名称',
                model: { label: { type: 'text' } },
                radio: true,
                layVerify: "required",
                clickClose: true,
                height: '200px',
                filterable: true,
                create: function (val, arr) {
                    return {
                        name: val,
                        value: val
                    }
                },
                on: function (data) {
                    //arr:  当前多选已选中的数据
                    var arr = data.arr;
                    //change, 此次选择变化的数据,数组
                    var change = data.change;
                    //isAdd, 此次操作是新增还是删除
                    var isAdd = data.isAdd;
                    if (isAdd) {
                        $("input[name='cEnCode']").val(arr[0]?.code);
                    }
                },
                data() {
                    var data = [
                        { name: "新增", value: "新增", code: "x-add" },
                        { name: "编辑", value: "编辑", code: "x-edit" },
                        { name: "删除", value: "删除", code: "x-delete" },
                        { name: "批量删除", value: "批量删除", code: "x-batch-delete" },
                        { name: "导出", value: "导出", code: "x-export" },
                        { name: "导入", value: "导入", code: "x-import" },
                        { name: "审核", value: "审核", code: "x-verify" },
                        { name: "重置", value: "重置", code: "x-reset" }
                    ];
                    return data;
                }
            })

            //获取表单值
            if (id != "") {
                admin.req({
                    type: 'get',
                    url: "/api/Module/GetModuleButtonById?id=" + id,
                    success: function (r) {
                        if (r.code == 200) {
                            $("#popup-from").SetFormData(r.data);
                            xmTitle.setValue([{ name: r.data.cTitle, value: r.data.cTitle }]);
                            form.render();
                            if (r.data.cIcon.indexOf("fa") == 0) {
                                $("#iconShow").html(' <i class="fa ' + r.data.cIcon + ' fa-fw fa-2x" aria-hidden="true"></i>');
                            } else {
                                $("#iconShow").html('<i class="layui-icon ' + r.data.cIcon + '" style="font-size:30px"></i>');
                            }
                        }
                    }
                });
            }
            //保存表单
            form.on('submit(form-submit)', function (data) {
                var field = data.field; //获取提交的字段
                field.cModuleId = moduleId;
                field.cModuleName = title;
                //提交
                admin.req({
                    type: 'post',
                    url: "/api/module/EditModuleButton",
                    data: field,
                    success: function (data) {
                        if (data.code == 200) {
                            parent.layer.msg('操作成功!', { icon: 1, time: 500 }, function () {
                                parent.$("iframe")[0].contentWindow.layui.table.reload('modulebutton-manage');
                                var index = parent.layer.getFrameIndex(window.name);
                                parent.layer.close(index);
                            });
                        } else {
                            layer.msg('操作失败!\n' + data.msg, { icon: 2, time: 1000 });
                        }
                    }
                });
            });

        })
    </script>
</body>

</html>